<template>
    <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-button @click="router.push('/menus/create')">添加菜单</el-button>
      </div>
    </template>
    <el-table :data="allMenus" border style="width: 100%" >
    <el-table-column type="index" label="序号" width="180" align="center"/>
    <el-table-column prop="name" label="菜单名称" align="center"/>
    <el-table-column prop="level" label="菜单层级" width="180" align="center"/>
    <el-table-column prop="icon" label="菜单图标" align="center"/>
    <el-table-column prop="orderNum" label="排序" align="center"/>
    <el-table-column label="操作" align="center">
        <el-button type="primary">编辑菜单</el-button>
        <el-button type="danger">删除菜单</el-button>
    </el-table-column>
  </el-table>
  </el-card>
</template>

<script setup lang="ts">
import {getAll} from "@/api/menus";
import type {MenuItem} from "@/api/menus";
import {ref} from "vue";
import { ElMessage } from "element-plus"; // 导入ElMessage
import { useRouter } from "vue-router";
//定义一个变量保存接口，存储返回的数据
const allMenus=ref([]as MenuItem[])
const router = useRouter();

//获取数据的完整逻辑
const getAllMenus= async ()=>{
    const {data}=await getAll()
    if(data.code==="000000"){
        allMenus.value=data.data
    }else{
        ElMessage.error("获取菜单信息失败")
        throw new Error("获取菜单信息失败")
    }
}
getAllMenus()
</script>

<style lang="scss" scoped>
.box-card {
    width: auto;
}
</style>